<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酷我音乐</title>
    <link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
</head>

<body>
    <div class="index">
        <!-- 搜索框 -->
        <div class="search">
            <i class="iconfont icon-sousuo txt"></i>
            <span class="txt">搜索你想听的歌曲</span>
        </div>
        <!-- banner区域 -->
        <div class="banner">
            <ul class="bannerList">
                <li>
                    <a href="#"><img src="./assets/banner01.jpeg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="./assets/banner02.jpeg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="./assets/banner03.jpeg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="./assets/banner01.jpeg" alt=""></a>
                </li>
            </ul>
            <ol>
                <li class="active"></li>
                <li></li>
                <li></li>
            </ol>
        </div>
        <!-- 排行榜区域 -->
        <div class="rankList">
            <div class="title">
                <h2>酷我排行榜</h2>
                <a href="#" class="more">
                    <span>更多</span>
                    <i class="iconfont icon-right"></i>
                </a>
            </div>
            <div class="content">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./assets/icon_rank_hot.png" alt="">
                            <dl>
                                <dt>酷我热歌榜<i class="iconfont icon-right"></i></dt>
                                <dd>1.再无归期无归人 - 亦伊</dd>
                                <dd>2.不如见一面 - 海来阿木&单依纯</dd>
                                <dd>3.如果可以 - 韦礼安</dd>
                            </dl>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./assets/icon_rank_new.png" alt="">
                            <dl>
                                <dt>酷我飙升榜<i class="iconfont icon-right"></i></dt>
                                <dd>1.如果可以 - 韦礼安</dd>
                                <dd>2.落(花开花落日升日没) - 唐伯虎Annie</dd>
                                <dd>3.有形的翅膀 - 张韶涵</dd>
                            </dl>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="./assets/icon_rank_rise.png" alt="">
                            <dl>
                                <dt>酷我新歌榜<i class="iconfont icon-right"></i></dt>
                                <dd>1.你冷落我我就放弃你 - 艺凌</dd>
                                <dd>2.无情伤了痴情心 - 赵洋</dd>
                                <dd>3.见异思迁 - 海来阿木</dd>
                            </dl>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 推荐歌单区域 -->
        <div class="recommend">
            <div class="title">
                <h2>推荐歌单</h2>
                <a href="#" class="more">
                    <span>更多</span>
                    <i class="iconfont icon-right"></i>
                </a>
            </div>
            <div class="content">
                <ul>
                    <li>
                        <a href="#">
                            <div class="cover">
                                <img src="./assets/song01.webp" alt="">
                                <div class="playInfo">
                                    <img src="./assets/play.png" alt="">
                                    <span>1亿</span>
                                </div>
                            </div>
                            <p>经典老歌大放送！一人一首...</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="cover">
                                <img src="./assets/song02.webp" alt="">
                                <div class="playInfo">
                                    <img src="./assets/play.png" alt="">
                                    <span>3665.9w</span>
                                </div>
                            </div>
                            <p>伤感情歌 | 不眠夜里的孤单心事</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="cover">
                                <img src="./assets/song03.webp" alt="">
                                <div class="playInfo">
                                    <img src="./assets/play.png" alt="">
                                    <span>4138.5w</span>
                                </div>
                            </div>
                            <p>【经典国语】老男人的情怀老...</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="cover">
                                <img src="./assets/song04.webp" alt="">
                                <div class="playInfo">
                                    <img src="./assets/play.png" alt="">
                                    <span>1222.7w</span>
                                </div>
                            </div>
                            <p>抖音流行 | 网红歌曲随身听</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="cover">
                                <img src="./assets/song05.webp" alt="">
                                <div class="playInfo">
                                    <img src="./assets/play.png" alt="">
                                    <span>2477.3w</span>
                                </div>
                            </div>
                            <p>【燃爆】抖音中俘虏你耳朵的...</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="cover">
                                <img src="./assets/song06.webp" alt="">
                                <div class="playInfo">
                                    <img src="./assets/play.png" alt="">
                                    <span>2807.8w</span>
                                </div>
                            </div>
                            <p>【伤感】对于你，我总是好...</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 听书区域 -->
        <div class="recommBook">
            <div class="title">
                <h2>听书</h2>
                <a href="#" class="more">
                    <span>更多</span>
                    <i class="iconfont icon-right"></i>
                </a>
            </div>
            <div class="content">
                <ul>
                    <li>
                        <a href="#">
                            <div class="cover">
                                <img src="./assets/book01.webp" alt="">
                                <div class="playInfo">
                                    <img src="./assets/play.png" alt="">
                                    <span>4208.7w</span>
                                </div>
                            </div>
                            <p>重温西游记，经典还是经典！</p>
                            <span>西游记影视剧原声...</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="cover">
                                <img src="./assets/book02.webp" alt="">
                                <div class="playInfo">
                                    <img src="./assets/play.png" alt="">
                                    <span>881.5w</span>
                                </div>
                            </div>
                            <p>岳云鹏孙越十大爆笑相声</p>
                            <span>岳云鹏孙越爆笑相...</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="cover">
                                <img src="./assets/book03.webp" alt="">
                                <div class="playInfo">
                                    <img src="./assets/play.png" alt="">
                                    <span>486.7w</span>
                                </div>
                            </div>
                            <p>元芳，你怎么看？</p>
                            <span>狄仁杰探案集</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 版权区域 -->
        <div class="footer">
            <div class="sign">
                <img src="./assets/logo.png" alt="">
                <p>酷我音乐</p>
            </div>
            <div class="agreement">
                <span>服务协议&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                <span>隐私政策&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                <span>用户权限&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                <span>联系电话: (010)87939999</span>
            </div>
            <p class="version">
                应用版本：<span>10.7.0.0</span> 开发者：
                <span>北京酷我科技有限公司</span>
            </p>
            <p class="intro">
                公司简介<i class="iconfont icon-right"></i>
            </p>
        </div>
        <!-- 上方广告区域 -->
        <div class="top">
            <div class="imghead"></div>
            <div class="right">
                <span>下载APP</span>
                <i class="iconfont icon-down"></i>
            </div>
        </div>
        <!-- 下方广告区域 -->
        <div class="bottom">
            <div class="adv">
                <img src="./assets/logo.png" alt="">
                <span>安装酷我音乐 发现更多好音乐</span>
            </div>
            <div class="moreIcon">
                <i class="iconfont icon-right"></i>
            </div>
        </div>
    </div>
</body>

</html>